<template>
    <require from="./em-chat-content-item-footbar.css"></require>
    <div class="em-chat-content-item-footbar">
        <!-- <div class="ui image label" repeat.for="item of chat.chatLabels | chatLabelFilter:'Emoji'" if.bind="item.voters.length != 0" click.delegate="toggleChatLabelHandler({value: item.name, label: item.description, type: 'emoji'})" data-tooltip="${item | chatLabelTip & signal:'sg-chatlabel-refresh'}" innerhtml.bind="(item.name + '<div style=\'margin-left: 0;\' class=\'detail\'>' + item.voters.length + '</div>') | emojiRepl"></div> -->
        <div repeat.for="item of chat.chatLabels | chatLabelFilter:'Emoji'" class="ui image label tms-tag-item" if.bind="item.voters.length != 0" click.delegate="toggleChatLabelHandler({value: item.name, label: item.description, type: 'emoji'})" data-position="top left" data-tooltip="${item | chatLabelTip & signal:'sg-chatlabel-refresh'}">
            <span innerhtml.bind="(item.name) | emojiRepl"></span>
            <div show.bind="!item._filter" class="detail">${item.voters.length}</div>
            <i show.bind="item._filter" style="margin: 0;" class="remove red link icon" title="清除以此标签过滤" click.delegate="clearFilterByLabelHandler(item, $event)"></i>
            <div show.bind="!item._filter" ui-dropdown-hover class="ui ${last ? 'bottom' : 'top'} right pointing dropdown">
                <a class="text" style="margin: 0; line-height: 1;" title="更多操作" click.delegate="stopPropagationHandler($event)"><i class="ellipsis vertical link icon" style="margin: 0;"></i></a>
                <div class="menu">
                    <div class="item" click.delegate="filterByLabelHandler(item, $event)" title="以此表情过滤"><i class="filter icon"></i>过滤</div>
                    <div class="item" click.delegate="searchByLabelHandler(item, $event)" title="以此表情查找"><i class="search icon"></i>查找</div>
                </div>
            </div>
        </div>
        <span ref="addEmojiRef" class="add-btn add-emoji-btn ${chat.chatLabels | chatLabelExist:'Emoji' & signal:'sg-chatlabel-refresh'}">+<i class="smile icon large link"></i></span>
        <div class="ui popup top left transition hidden emojis">
            <div class="content">
                <span class="emoji-item" repeat.for="item of emojis" data-tooltip="${item.label}" click.delegate="toggleChatLabelHandler(item)" innerhtml.bind="item.value | emojiRepl"></span>
            </div>
        </div>
        <div repeat.for="item of chat.chatLabels | chatLabelFilter:'Tag'" class="ui ${item | labelColor} tags label tms-tag-item" css.bind="item | labelCss" if.bind="item.voters.length != 0" click.delegate="toggleChatLabelHandler({value: item.name, label: item.description, type: 'tag'})" data-position="top left" data-tooltip="${item | chatLabelTip & signal:'sg-chatlabel-refresh'}">${item.name}
            <div show.bind="!item._filter" class="detail">${item.voters.length}</div>
            <i show.bind="item._filter" style="margin: 0; margin-left: 8px;" class="remove red link icon" title="清除以此标签过滤" click.delegate="clearFilterByLabelHandler(item, $event)"></i>
            <div show.bind="!item._filter" ui-dropdown-hover class="ui ${last ? 'bottom' : 'top'} right pointing dropdown">
                <a class="text" style="margin: 0; margin-left: 8px; line-height: 1;" title="更多操作" click.delegate="stopPropagationHandler($event)"><i class="ellipsis vertical link icon" style="margin: 0;"></i></a>
                <div class="menu">
                    <div class="item" click.delegate="filterByLabelHandler(item, $event)" title="以此标签过滤"><i class="filter icon"></i>过滤</div>
                    <div class="item" click.delegate="searchByLabelHandler(item, $event)" title="以此标签查找"><i class="search icon"></i>查找</div>
                </div>
            </div>
        </div>
        <span ref="addTagRef" class="add-btn add-tag-btn ${chat.chatLabels | chatLabelExist & signal:'sg-chatlabel-refresh'}">+<i class="tags icon large link"></i></span>
        <div class="ui popup top left transition hidden tags ${isCustomTag ? 'customTag' : ''}" style="padding-right: 4px;">
            <div class="content">
                <div show.bind="!isCustomTag" ui-dropdown class="ui ${last ? 'bottom' : (lastPre ?  '' : 'top')} left pointing dropdown mini icon">
                    <i class="ellipsis vertical icon"></i>
                    <div class="menu">
                        <div class="ui left search icon input">
                            <i class="search icon" style="padding-top: 0; padding-bottom: 0;"></i>
                            <input type="text" name="search" placeholder="查找标签...">
                        </div>
                        <div class="header">
                            <i class="tags icon"></i> 消息标签
                        </div>
                        <div class="scrolling menu">
                            <div class="item tms-tag" repeat.for="item of myTags" click.delegate="toggleChatLabelHandler(item)">
                                <div class="ui green empty circular label" style="width: 0; height: 0;" data-value="${item.value}"></div>
                                ${item.label}
                                <i class="delete link icon" if.bind="!item.undel" click.delegate="removeTagHandler(item, $event)"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div repeat.for="item of tags" class="ui ${item.color} label" data-tooltip="${item.label}" click.delegate="toggleChatLabelHandler(item)">${item.value}</div>
                <div if.bind="isCustomTag" class="ui ${!isCustomTag ? 'transparent' : ''} icon input">
                    <input ref="tagRef" keyup.trigger="tagKeyupHandler() & key" type="text" placeholder="">
                    <i click.delegate="toggleCustomTagHandler()" title="添加自定义标签" class="add link icon"></i>
                    <i click.delegate="closeCustomTagHandler()" title="关闭窗口" style="position: absolute; top: -12px; right: -2px; width: auto; height: auto;" class="circle red link big remove icon"></i>
                </div>
                <i if.bind="!isCustomTag" click.delegate="toggleCustomTagHandler()" title="添加自定义标签" style="margin-right: 0; display: inline; font-size: 1.8em;" class="add big blue circle link icon"></i>
            </div>
        </div>
    </div>
</template>
